{%extends "atletas/base.html"%}

{%block extrahead%}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css">

    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.tabs.css" type="text/css"/>
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.core.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css" />
    <style>
        #arriba  { width: 100%; float: left; height:20px}
        #leftcolumn  { width: 35%; float: left; height:46px}
        #rightcolumn { width: 65%; float: right; height:46px}
        #leftcolumn1  { width: 20%; float: left; height:46px}
        #rightcolumn1 { width: 80%; float: right; height:46px}
    </style>
    
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script> 

    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.datepicker-es.js"></script>
    
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.tabs.js"></script> 
    
    <script> 
        $(function() {
            $("#tabs").tabs();
        
            var date = $("#id_fecha_nacimiento").datepicker({
                defaultDate: "+1w",
                buttonImage: "{{STATIC_PREFIX}}css/jquery/ui/images/calendar.gif",
                showOn: "button",
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 1,
                yearRange: '1950'
            });
            
        });
    </script>
{%endblock%}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href='/atletas/'>Atletas</a> > {% if not atleta %}Crear atleta{% else %} Editar atleta {% endif %} {% endblock %}

{%block content%}
    <form action="" method="post" enctype='multipart/form-data'>{% csrf_token %}
        <div class='demo'>
            <div id="tabs"> 
                <ul> 
                    <li><a href="#tabs-1">Perfil</a></li>
                    <li><a href="#tabs-2">Contacto</a></li>
                    <li><a href="#tabs-3">Encargado</a></li>
                    <li><a href="#tabs-6">Perfil Médico</a></li>
                    <li><a href="#tabs-5">Entrenadores</a></li>
                    <li><a href="#tabs-4">Deportes</a></li>
                </ul> 
                <div id="tabs-1">
                    <table width='100%'> <tr> <td>
                        <div>
                            <div align="right" id="arriba"></div>
                            <div>
                                {{form.activo.errors}}
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_activo">Activo: </label></div>
                                <div align="left" id="rightcolumn">{{form.activo}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.nombres.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_nombres">Nombres*: </label></div>
                                <div align="left" id="rightcolumn">{{form.nombres}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.apellidos.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_apellidos">Apellidos*: </label></div>
                                <div align="left" id="rightcolumn">{{form.apellidos}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.fecha_nacimiento.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_fecha_nacimiento">Fecha de nacimiento*: </label></div>
                                <div align="left" id="rightcolumn">{{form.fecha_nacimiento}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.sexo.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_sexo">Sexo*: </label></div>
                                <div align="left" id="rightcolumn">{{form.sexo}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.pasaporte.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_pasaporte">Pasaporte: </label></div>
                                <div align="left" id="rightcolumn">{{form.pasaporte}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.estudios.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_estudios">Estudios: </label></div>
                                <div align="left" id="rightcolumn">{{form.estudios}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.identificacion_personal_tipo.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_identificacion_personal_tipo">Tipo de identificacion personal: </label></div>
                                <div align="left" id="rightcolumn">{{form.identificacion_personal_tipo}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.identificacion_personal_valor.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_identificacion_personal_valor">Identificacion personal: </label></div>
                                <div align="left" id="rightcolumn">{{form.identificacion_personal_tipo}}</div>
                                </div>
                            </div>
                            
                            
                        </div> </td> 
                        <td>
                            <div align="center">
                                <img src='{{STATIC_PREFIX}}media/{{url_foto}}' alt='Foto perfil' width='200' height='200'/>
                                <div>
                                    {{form.file.errors}}
                                    <div>{{form.file}}</div>
                                </div>
                            </div>
                        </td>
                    </tr> </table>
                </div>
                
                <div id="tabs-2">
                    <table width='100%'>
                    <div align="right" id="arriba"></div>
                    
                    <div>
                        <center>{{form.telefono_celular.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_telefono_celular">Teléfono celular: </label></div>
                        <div align="left" id="rightcolumn1">{{form.telefono_celular}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.telefono.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_telefono">Teléfono domicilio: </label></div>
                        <div align="left" id="rightcolumn1">{{form.telefono}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.correo_electronico.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_correo_electronico">Correo electrónico: </label></div>
                        <div align="left" id="rightcolumn1">{{form.correo_electronico}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.direccion.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_direccion">Dirección: </label></div>
                        <div align="left" id="rightcolumn1">{{form.direccion}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.direccion_municipio.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_direccion_municipio">Municipio: </label></div>
                        <div align="left" id="rightcolumn1">{{form.direccion_municipio}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.direccion_departamento.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_direccion_departamento">Departamento: </label></div>
                        <div align="left" id="rightcolumn1">{{form.direccion_departamento}}</div>
                        </div>
                    </div>
                    
                    </table>
                </div>
                
                <div id="tabs-3">
                    <table width='100%'>
                    <div align="right" id="arriba"></div>
                    
                    <div>
                        <center>{{form.encargado_nombres.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_encargado_nombres">Nombre: </label></div>
                        <div align="left" id="rightcolumn1">{{form.encargado_nombres}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.encargado_apellidos.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_encargado_apellidos">Apellidos: </label></div>
                            <div align="left" id="rightcolumn1">{{form.encargado_apellidos}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.encargado_identificacion_personal_tipo.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_encargado_identificacion_personal_tipo">Tipo de identificación personal: </label></div>
                            <div align="left" id="rightcolumn1">{{form.encargado_identificacion_personal_tipo}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.encargado_identificacion_personal_valor.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_encargado_identificacion_personal_valor">Identificación personal: </label></div>
                            <div align="left" id="rightcolumn1">{{form.encargado_identificacion_personal_valor}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.encargado_telefono_celular.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_encargado_telefono_celular">Teléfono celular: </label></div>
                            <div align="left" id="rightcolumn1">{{form.encargado_telefono_celular}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.encargado_telefono.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id:encargado_telefono">Teléfono domicilio: </label></div>
                            <div align="left" id="rightcolumn1">{{form.encargado_telefono}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.encargado_correo.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_encargado_correo">Correo electrónico: </label></div>
                            <div align="left" id="rightcolumn1">{{form.encargado_correo}}</div>
                        </div>
                    </div>
                    </table>
                </div>
                
                <div id="tabs-4">
                    {% if atleta.deportes.all %}
                    <h3>Se encuentra federado a los siguientes deportes:</h3>
                    <ul>
                        {% for deporte in atleta.deportes.all %}
                        <li><a href="/deportes/ver/{{deporte.pk}}">{{deporte.nombre}}</a></li> 
                        {% endfor %}
                    </ul>
                    {% else %}
                    <h3>El atleta no está federado a ningún deporte</h3>
                    {% endif %}
                    <input type="submit" class='cancelbuton' value="Federar" name='boton_federar'/>
                </div>
                
                <div id="tabs-5">
                    
                    <!-- agregado para multiselect -->
                    <link type="text/css" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.multiselect.css" rel="stylesheet" />
                    <!--link type="text/css" rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css" /-->
                    <!--script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script-->
                    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery-ui-1.8.12.custom.min.js"></script>
                    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/ui.multiselect.js"></script>

                    <script type="text/javascript">
                        $(function(){
                            $(".multiselect").multiselect();        
                        });
                    </script>
                    <!-- agregado para multiselect -->
                    
                    <select id="tags" name="entrenadores[]" class="multiselect" multiple="multiple" >
                    {% for entrenador in entrenadores%}
                        {% if  entrenador in atleta.entrenadores.all %}
                            <option value="{{entrenador.pk}}" selected>{{entrenador}}</option>
                        {% else %}
                            <option value="{{entrenador.pk}}">{{entrenador}}</option>
                        {% endif %}
                    {% endfor %}
                    </select>
                    
                    
                </div>
                
                <div id="tabs-6">
                    
                    <table width='100%'>
                    <div align="right" id="arriba"></div>
                    
                    <div>
                        <center>{{form.peso.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_peso">Peso: </label></div>
                            <div align="left" id="rightcolumn1">{{form.peso}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.estatura.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_estatura">Estatura: </label></div>
                            <div align="left" id="rightcolumn1">{{form.estatura}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.grupo_sanguineo.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_grupo_sanguineo">Grupo sanguineo: </label></div>
                            <div align="left" id="rightcolumn1">{{form.grupo_sanguineo}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.alergias_enfermedades.errors}}</center>
                        <div>
                            <div align="right" id="leftcolumn1"><label for="id_alergias_enfermedades">Alergias o enfermedades: </label></div>
                            <div align="left" id="rightcolumn1">{{form.alergias_enfermedades}}</div>
                        </div>
                    </div>
                    
                    </table>
                </div>
            </div>
        </div>
        
        <div id='buttons' align='right' class="but-body">
            <input type="submit" class='savebuton'   value="Guardar"                      name='boton_guardar'/>
            <input type="submit" class='savebuton'   value="Guardar e ingresar otro"       name='boton_guardar_y_otro'/>
            <input type="submit" class='savebuton'   value="Guardar y continuar editando" name='boton_guardar_y_editar'/>
            <input type="submit" class='cancelbuton' value="Cancelar"                     name='boton_cancelar'/>
        </div>
    </form>
{%endblock%}
